<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="keywords" content="王非凡,个人主页,Vue,简历">
  <meta name="description" content="王非凡的个人主页 王非凡的个人主页">
  <title>王非凡的主页</title>
  <style>
    #loading-div {
      height: 100vh;
      width: 100vw;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #loading-div .loading-box {
      position: relative;
      width: 200px;
      height: 62px;
    }

    #loading-div .loading-box .loading-circle {
      width: 20px;
      height: 20px;
      background-color: #ff4a69;
      border-radius: 50%;
      position: absolute;
      left: 15%;
      top: 0%;
      animation: circle-bounce 0.5s alternate ease-in infinite;
    }

    #loading-div .loading-box .loading-shadow {
      width: 20px;
      height: 4px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.4);
      position: absolute;
      top: 62px;
      left: 15%;
      filter: blur(1px);
      opacity: 0.4;
      animation: shadow-bounce 0.5s alternate ease-in infinite;
    }

    #loading-div .loading-box .loading-circle:nth-child(2),
    #loading-div .loading-box .loading-shadow:nth-child(4) {
      left: 45%;
      animation-delay: 0.2s;
    }

    #loading-div .loading-box .loading-circle:nth-child(3),
    #loading-div .loading-box .loading-shadow:nth-child(5) {
      left: 75%;
      animation-delay: 0.3s;
    }

    @keyframes circle-bounce {
      from {
        top: 0%;
        transform: scaleX(1);
      }

      60% {
        height: 20px;
        border-radius: 50%;
        transform: scaleX(1);
      }

      to {
        top: 60px;
        height: 5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
      }
    }

    @keyframes shadow-bounce {
      from {
        opacity: 0.4;
      }

      60% {
        opacity: 0.7;
      }

      to {
        transform: scaleX(1.5);
      }
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <!-- 首屏加载 -->
  <div id="loading-div">
    <div class="loading-box">
      <div class="loading-circle"></div>
      <div class="loading-circle"></div>
      <div class="loading-circle"></div>
      <div class="loading-shadow"></div>
      <div class="loading-shadow"></div>
      <div class="loading-shadow"></div>
    </div>
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>